<template>
  <div class="cart">
    <div class="container">
      <!-- Header -->
      <div class="cart-header-section">
        <h1>购物车</h1>
        <div v-if="cartItems.length > 0" class="cart-progress">
          <div v-for="(step, index) in progressSteps" :key="index" 
               :class="['progress-step', { active: index === 0 }]">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-label">{{ step }}</div>
          </div>
        </div>
      </div>

      <!-- Empty Cart -->
      <div v-if="cartItems.length === 0" class="empty-cart">
        <div class="empty-icon">🛒</div>
        <p>购物车为空</p>
        <div class="empty-actions">
          <router-link to="/events" class="btn btn-primary">去选购演出票</router-link>
        </div>
      </div>

      <!-- Cart Content -->
      <div v-else class="cart-content">
        <div class="cart-items">
          <!-- Stats -->
          <div class="cart-stats">
            <div v-for="stat in cartStats" :key="stat.label" class="stat-item">
              <div class="stat-icon">{{ stat.icon }}</div>
              <div class="stat-content">
                <div class="stat-number">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
              </div>
            </div>
          </div>

          <!-- Bulk Actions -->
          <div class="bulk-actions">
            <label class="checkbox-container">
              <input type="checkbox" :checked="isAllSelected" @change="toggleSelectAll">
              <span class="checkmark"></span>
              全选 ({{ selectedIds.length }}/{{ cartItems.length }})
            </label>
            <div class="bulk-buttons">
              <button @click="removeSelected" :disabled="selectedIds.length === 0" class="btn btn-outline btn-sm">
                删除选中 ({{ selectedIds.length }})
              </button>
              <button @click="clearCart" class="btn btn-outline btn-sm">清空购物车</button>
            </div>
          </div>

          <!-- Cart Items -->
          <div class="items-list">
            <div v-for="item in cartItems" :key="item.id" class="cart-item">
              <label class="checkbox-container">
                <input type="checkbox" :value="item.id" v-model="selectedIds">
                <span class="checkmark"></span>
              </label>
              
              <div class="item-image">
                <img :src="item.image || getEventImage(item.eventId)" :alt="item.eventTitle">
                <div class="item-badge">{{ getEventBadge(item) }}</div>
              </div>
              
              <div class="item-details">
                <h3>{{ item.eventTitle }}</h3>
                <div class="item-meta">
                  <div class="meta-row">
                    <span class="meta-label">📍 场馆:</span>
                    <span class="meta-value">{{ item.venue }}</span>
                  </div>
                  <div class="meta-row">
                    <span class="meta-label">📅 时间:</span>
                    <span class="meta-value">{{ formatDateTime(item.date) }}</span>
                  </div>
                  <div class="meta-row">
                    <span class="meta-label">🎫 票种:</span>
                    <span class="meta-value">{{ item.ticketType }}</span>
                  </div>
                  <div class="meta-row">
                    <span class="meta-label">💺 座位:</span>
                    <span class="meta-value">{{ getSeatText(item) }}</span>
                  </div>
                </div>
                <div class="item-tags">
                  <span v-if="isEventSoon(item.date)" class="tag tag-warning">即将开始</span>
                  <span v-if="isVip(item)" class="tag tag-vip">VIP</span>
                  <span v-if="item.quantity > 1" class="tag tag-info">{{ item.quantity }}张</span>
                </div>
              </div>
              
              <div class="item-actions">
                <div class="quantity-controls">
                  <button @click="updateQuantity(item.id, item.quantity - 1)" :disabled="item.quantity <= 1">-</button>
                  <span class="quantity">{{ item.quantity }}</span>
                  <button @click="updateQuantity(item.id, item.quantity + 1)" :disabled="item.quantity >= 6">+</button>
                </div>
                <div class="item-price">
                  <div class="unit-price">¥{{ item.price }}/张</div>
                  <div class="total-price">¥{{ item.total }}</div>
                </div>
                <button @click="removeItem(item.id)" class="remove-btn" :title="'删除' + item.eventTitle">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M3 6H5H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19ZM10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Sidebar -->
        <div class="cart-sidebar">
          <!-- Coupon Section -->
          <div class="coupon-section">
            <h3>优惠券</h3>
            <div class="coupon-input">
              <input v-model="couponCode" placeholder="输入优惠券代码" @keyup.enter="applyCoupon">
              <button @click="applyCoupon" :disabled="!couponCode.trim()">使用</button>
            </div>
            <div v-if="appliedCoupon" class="applied-coupon">
              <div class="coupon-info">
                <span class="coupon-name">{{ appliedCoupon.name }}</span>
                <span class="coupon-discount">-¥{{ appliedCoupon.discount }}</span>
              </div>
              <button @click="removeCoupon" class="remove-coupon">移除</button>
            </div>
            <div class="available-coupons">
              <h4>可用优惠券</h4>
              <div v-for="coupon in availableCoupons" :key="coupon.code" 
                   :class="['coupon-item', { disabled: subtotal < coupon.minAmount }]"
                   @click="applyCouponDirect(coupon)">
                <div class="coupon-header">
                  <span class="coupon-name">{{ coupon.name }}</span>
                  <span class="coupon-discount">¥{{ coupon.discount }}</span>
                </div>
                <div class="coupon-desc">{{ coupon.description }}</div>
              </div>
            </div>
          </div>

          <!-- Price Summary -->
          <div class="price-summary">
            <h3>价格明细</h3>
            <div class="price-breakdown">
              <div v-for="item in priceBreakdown" :key="item.label" class="price-item">
                <span class="price-label">{{ item.label }}</span>
                <span :class="['price-value', item.class]">{{ item.value }}</span>
              </div>
            </div>
            <div class="final-total">
              <span class="total-label">总计</span>
              <span class="total-amount">¥{{ finalTotal }}</span>
            </div>
            <div v-if="savedAmount > 0" class="savings">
              已为您节省 ¥{{ savedAmount }}
            </div>
          </div>

          <!-- Checkout -->
          <div class="checkout-section">
            <button @click="checkout" :disabled="cartItems.length === 0 || isCheckingOut" 
                    :class="['checkout-btn', { loading: isCheckingOut }]">
              {{ isCheckingOut ? '处理中...' : `立即结算 (${cartItems.length}件)` }}
            </button>
            <div class="checkout-tips">
              <div class="tip-item">
                <span class="tip-icon">🔒</span>
                <span class="tip-text">支付安全保障</span>
              </div>
              <div class="tip-item">
                <span class="tip-icon">⚡</span>
                <span class="tip-text">极速出票</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCartStore } from '../stores/cart'
import { useToastStore } from '@/stores/toast'
import { useRouter } from 'vue-router'

const cartStore = useCartStore()
const router = useRouter()
const toast = useToastStore()

// State
const isLoading = ref(false)
const isCheckingOut = ref(false)
const operatingItemId = ref(null)
const showRemoveTooltip = ref(null)
const couponCode = ref('')
const selectedIds = ref([])

// Constants
const progressSteps = ['选择商品', '确认订单', '支付完成']
const availableCoupons = ref([
  { code: 'WELCOME10', name: '新用户优惠券', description: '满100减10元', discount: 10, minAmount: 100 },
  { code: 'SAVE20', name: '满减优惠券', description: '满200减20元', discount: 20, minAmount: 200 },
  { code: 'VIP50', name: 'VIP专享券', description: '满500减50元', discount: 50, minAmount: 500 }
])

// Computed
const cartItems = computed(() => cartStore.items)
const totalTickets = computed(() => cartItems.value.reduce((total, item) => total + item.quantity, 0))
const subtotal = computed(() => cartStore.subtotal)
const serviceFee = computed(() => cartStore.serviceFee)
const couponDiscount = computed(() => cartStore.couponDiscount)
const finalTotal = computed(() => cartStore.finalTotal)
const savedAmount = computed(() => cartStore.couponDiscount)
const appliedCoupon = computed(() => cartStore.appliedCoupon)

const cartStats = computed(() => [
  { icon: '🎭', value: cartItems.value.length, label: '演出项目' },
  { icon: '🎫', value: totalTickets.value, label: '门票数量' },
  { icon: '💰', value: `¥${subtotal.value}`, label: '商品总价' }
])

const priceBreakdown = computed(() => [
  { label: '商品总价', value: `¥${subtotal.value}`, class: '' },
  { label: '服务费', value: `¥${Number(serviceFee.value).toFixed(2)}`, class: '' },
  ...(couponDiscount.value > 0 ? [{ label: '优惠券', value: `-¥${couponDiscount.value}`, class: 'discount' }] : [])
])

const isAllSelected = computed({
  get: () => selectedIds.value.length === cartItems.value.length && cartItems.value.length > 0,
  set: (value) => {
    selectedIds.value = value ? cartItems.value.map(item => item.id) : []
  }
})

// Methods
const toggleSelectAll = () => {
  isAllSelected.value = !isAllSelected.value
}

const removeSelected = () => {
  if (selectedIds.value.length === 0) return
  selectedIds.value.forEach(id => cartStore.removeItem(id))
  selectedIds.value = []
  toast.success(`已删除 ${selectedIds.value.length} 件商品`)
}

const clearCart = () => {
  if (confirm('确定要清空购物车吗？')) {
    cartStore.clearCart()
    selectedIds.value = []
    toast.success('购物车已清空')
  }
}

const updateQuantity = (itemId, newQuantity) => {
  if (newQuantity < 1 || newQuantity > 6) return
  cartStore.updateQuantity(itemId, newQuantity)
}

const removeItem = (itemId) => {
  cartStore.removeItem(itemId)
  selectedIds.value = selectedIds.value.filter(id => id !== itemId)
  toast.success('商品已移除')
}

const applyCoupon = () => {
  const coupon = availableCoupons.value.find(c => c.code === couponCode.value.trim().toUpperCase())
  if (!coupon) {
    toast.error('优惠券代码无效')
    return
  }
  if (subtotal.value < coupon.minAmount) {
    toast.error(`订单金额需满 ¥${coupon.minAmount} 才能使用此优惠券`)
    return
  }
  cartStore.applyCoupon(coupon)
  couponCode.value = ''
  toast.success(`优惠券已使用，节省 ¥${coupon.discount}`)
}

const applyCouponDirect = (coupon) => {
  if (subtotal.value < coupon.minAmount) {
    toast.error(`订单金额需满 ¥${coupon.minAmount} 才能使用此优惠券`)
    return
  }
  cartStore.applyCoupon(coupon)
  toast.success(`优惠券已使用，节省 ¥${coupon.discount}`)
}

const removeCoupon = () => {
  cartStore.removeCoupon()
  toast.success('优惠券已移除')
}

const checkout = async () => {
  if (cartItems.value.length === 0) return
  
  // Check for soon-to-start events
  const soonEvents = cartItems.value.filter(item => isEventSoon(item.date))
  if (soonEvents.length > 0) {
    const eventTitles = soonEvents.map(item => item.eventTitle).join('、')
    if (!confirm(`${eventTitles} 即将开始，确定要购买吗？`)) return
  }
  
  isCheckingOut.value = true
  
  try {
    await new Promise(resolve => setTimeout(resolve, 1000)) // Simulate processing
    toast.success('正在跳转到订单确认页面...')
    router.push('/order-confirm')
  } catch (error) {
    toast.error('结算失败，请重试')
  } finally {
    isCheckingOut.value = false
  }
}

const getEventImage = (eventId) => {
  const images = {
    1: '/src/assets/images/jay-concert.svg',
    2: '/src/assets/images/eason-concert.svg'
  }
  return images[eventId] || '/src/assets/images/phantom-opera.svg'
}

const getEventBadge = (item) => {
  const type = typeof item?.ticketType === 'string' ? item.ticketType : ''
  if (type.includes('VIP')) return 'VIP'
  if (item?.date && isEventSoon(item.date)) return '即将开始'
  return '热门'
}

const isVip = (item) => {
  const type = typeof item?.ticketType === 'string' ? item.ticketType : ''
  return type.includes('VIP')
}

const getSeatText = (item) => {
  const area = item?.seatArea || ''
  const seats = Array.isArray(item?.seats) ? item.seats.join(', ') : ''
  const text = [area, seats].filter(Boolean).join(' - ')
  return text || '未选座'
}

const formatDateTime = (dateStr) => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  }) + ' ' + date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const isEventSoon = (dateStr) => {
  const eventDate = new Date(dateStr)
  const now = new Date()
  const diffHours = (eventDate - now) / (1000 * 60 * 60)
  return diffHours > 0 && diffHours <= 24
}
</script>

<style scoped>
:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --error-color: #f44336;
  --border-color: #e0e0e0;
  --text-primary: #212121;
  --text-secondary: #757575;
  --background-light: #f8f9ff;
  --border-radius: 8px;
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.cart { min-height: 100vh; background: #fafafa; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

.cart-header-section {
  text-align: center;
  margin-bottom: 32px;
}

.cart-header-section h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.cart-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--border-color, #e0e0e0);
  color: var(--text-secondary, #757575);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
}

.progress-step.active .step-number {
  background: var(--primary-color, #667eea);
  color: #ffffff;
}

.step-label {
  font-size: 14px;
  color: var(--text-secondary, #757575);
  font-weight: 500;
}

.progress-step.active .step-label {
  color: var(--primary-color, #667eea);
  font-weight: 600;
}

.progress-line {
  width: 60px;
  height: 2px;
  background: var(--border-color, #e0e0e0);
}

.empty-cart {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 24px;
}

.empty-cart p {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.empty-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.cart-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

.cart-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-item {
  background: white;
  padding: 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  background: var(--background-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.bulk-actions {
  background: white;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.bulk-buttons {
  display: flex;
  gap: 12px;
}

.cart-item {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  padding: 20px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: auto 120px 1fr auto;
  gap: 16px;
  align-items: start;
  transition: all 0.3s;
}

.cart-item:hover {
  box-shadow: var(--shadow-medium);
}

.item-image {
  position: relative;
}

.item-image img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.item-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--primary-color, #667eea);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
}

.item-details h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.meta-row {
  display: flex;
  gap: 8px;
  font-size: 14px;
}

.meta-label {
  color: var(--text-secondary);
  min-width: 60px;
}

.meta-value {
  color: var(--text-primary);
}

.item-tags {
  display: flex;
  gap: 8px;
}

.tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.tag-warning { background: #fff3cd; color: #856404; }
.tag-vip { background: #f8d7da; color: #721c24; }
.tag-info { background: #d1ecf1; color: #0c5460; }

.item-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--background-light, #f8f9ff);
  border-radius: var(--border-radius);
  padding: 4px;
}

.quantity-controls button {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--primary-color, #667eea);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
}

.quantity-controls button:hover { background: var(--secondary-color); }
.quantity-controls button:disabled { background: #ccc; cursor: not-allowed; }

.quantity {
  font-weight: 600;
  min-width: 24px;
  text-align: center;
  color: var(--text-primary, #212121);
}

.item-price {
  text-align: right;
}

.unit-price {
  font-size: 12px;
  color: var(--text-secondary);
}

.total-price {
  font-size: 18px;
  font-weight: 700;
  color: #e91e63;
}

.remove-btn {
  background: none;
  border: none;
  color: var(--error-color);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s;
}

.remove-btn:hover {
  background: #ffebee;
  transform: scale(1.1);
}

.cart-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.coupon-section, .price-summary, .checkout-section {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  padding: 24px;
}

.coupon-section h3, .price-summary h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.coupon-input {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.coupon-input input {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 14px;
}

.coupon-input button {
  padding: 12px 20px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.coupon-input button:hover { background: var(--secondary-color); }
.coupon-input button:disabled { background: #ccc; cursor: not-allowed; }

.applied-coupon {
  background: var(--background-light);
  border-radius: var(--border-radius);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.coupon-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coupon-name {
  font-weight: 600;
  color: var(--text-primary);
}

.coupon-discount {
  color: var(--success-color);
  font-weight: 600;
}

.remove-coupon {
  background: none;
  border: none;
  color: var(--error-color);
  cursor: pointer;
  font-size: 12px;
}

.available-coupons h4 {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.coupon-item {
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.coupon-item:hover { border-color: var(--primary-color); }
.coupon-item.disabled { opacity: 0.5; cursor: not-allowed; }

.coupon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.coupon-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.price-breakdown {
  margin-bottom: 16px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.price-item:last-child { border-bottom: none; }

.price-label { color: var(--text-secondary); }
.price-value { font-weight: 500; }
.price-value.discount { color: var(--success-color); }

.final-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 2px solid var(--border-color);
  font-size: 18px;
  font-weight: 700;
}

.total-label { color: var(--text-primary); }
.total-amount { color: #e91e63; }

.savings {
  text-align: center;
  color: var(--success-color);
  font-weight: 600;
  font-size: 14px;
  margin-top: 8px;
}

.checkout-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 16px;
}

.checkout-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.checkout-btn.loading { background: #ccc; }

.checkout-tips {
  display: flex;
  justify-content: space-around;
}

.tip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tip-icon { font-size: 16px; }
.tip-text { font-size: 12px; color: var(--text-secondary); }

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.checkbox-container input[type="checkbox"] { display: none; }

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color, #e0e0e0);
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
  background: var(--primary-color, #667eea);
  border-color: var(--primary-color, #667eea);
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
  color: #ffffff;
}

.btn-outline {
  background: #ffffff;
  color: var(--primary-color, #667eea);
  border: 2px solid var(--primary-color, #667eea);
}

.btn-sm { padding: 8px 16px; font-size: 14px; }

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Responsive */
@media (max-width: 768px) {
  .cart-content { grid-template-columns: 1fr; }
  .cart-stats { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: auto 1fr; }
  .item-image { grid-column: 1 / -1; justify-self: center; }
  .bulk-actions { flex-direction: column; gap: 12px; align-items: stretch; }
  .bulk-buttons { justify-content: center; }
  .checkout-tips { flex-direction: column; gap: 8px; }
}
</style>